import 'dart:math';

import 'package:calendar_girl/utils/music-icon.dart';
import 'package:calendar_girl/views/play/model/MusicModel.dart';
import 'package:flutter/material.dart';

class Album extends StatefulWidget{
  Album({@required this.music, this.onClick});
  final MusicModel music;
  final Function onClick;
  @override
  State<StatefulWidget> createState() {
    return AlbumState();
  }
}

class AlbumState extends State<Album> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      value: widget.music.playing ? (-1 / 12) : 0,
      duration: Duration(milliseconds: 600),
      vsync: this,
    );
    _animation = Tween<double>(begin: (-1 / 12), end: 0)
        .chain(CurveTween(curve: Curves.easeInOut))
        .animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if(widget.music.playing){
      _controller.forward();
    }
    else{
      _controller.reverse();
    };
    return Column(
      children: <Widget>[
        Expanded(
          child: GestureDetector(
            onTap: () {
              widget.onClick(false);
            },
            child: Stack(
              children: <Widget>[
                Container(
                  alignment: Alignment.topCenter,
                  margin: EdgeInsets.only(top: 60),
                  child: _RotationImage(rotating: widget.music.playing,),
                ),
                Positioned(
                  top: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    alignment: Alignment.topCenter,
                    child: SizedBox(
                      width: 200,
                      height: 176,
                      child: RotationTransition(
                        turns: _animation,
                        alignment: Alignment(0, -0.91),
                        child: Image.asset('assets/playing_page_needle.png', fit: BoxFit.fitHeight, alignment: Alignment.topRight,),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
        Wrap(
          alignment: WrapAlignment.center,
          spacing: 16,
          children: <Widget>[
            new IconButton(icon: Icon(Icons.favorite_border, color: Colors.white,)),
            new IconButton(icon: Icon(Icons.save_alt, color: Colors.white,)),
            new IconButton(icon: Icon(MusicIcon.comment, color: Colors.white,)),
            new IconButton(icon: Icon(Icons.more_vert, color: Colors.white,)),
          ],
        )
      ],
    );
  }
}

class _RotationImage extends StatefulWidget {
  _RotationImage({this.rotating});
  final bool rotating;
  @override
  State<StatefulWidget> createState() {
    return _RotationImageState();
  }
}

class _RotationImageState extends State<_RotationImage> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  Animation _animation;
  double _rotation = 0;
  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: Duration(milliseconds: 3000),
      vsync: this,
      animationBehavior: AnimationBehavior.preserve
    );
    _animation = CurvedAnimation(
      curve: Curves.ease,
      parent: _controller
    )..addListener(() {
      setState(() {
        _rotation = _controller.value * pi * 2;
      });
    })
    ..addStatusListener((status) {
      if(status == AnimationStatus.completed && _controller.value == 1){
        _controller.forward(from: 0);
      }
    });
  }
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
  @override
  Widget build(BuildContext context) {
    if(widget.rotating){
      _controller.forward();
    }
    else{
      _controller.stop();
    }
    return Transform.rotate(
      angle: _rotation,
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.black
        ),
        width: 230,
        height: 230,
        alignment: Alignment.center,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white
          ),
          width: 200,
          height: 200,
          alignment: Alignment.center,
          child: Image.asset('assets/1234899.png', width: 190, height: 190, ),
        ),
      ),
    );
  }
}